<template>
	<view :class="Visible ? 'usable-distr open' : 'usable-distr close'">
		<view class="popup-bg" @click="closePopup(false)"></view>
		<view class="main" v-on:click.stop>
			<view class="distr-tit">配送方式</view>
			<radio-group @change="radioChange">
				<view v-if="hasType('10')" class="distr-list border-b">
					<view class="f28 gray3">普通配送</view>
					<view class="radio">
						<radio style="transform:scale(0.7)" :color="getThemeColor()" :value="'10'"
							:checked="checked_id == 10" /><text></text>
					</view>
				</view>
				<view v-if="hasType('20')">
					<view class="distr-list border-b">
						<view class="f28 gray3">门店自提：</view>
						<view class="radio">
							<radio style="transform:scale(0.7)" :color="getThemeColor()" :value="'20'"
								:checked="checked_id == 20" /><text></text>
						</view>
					</view>
					<Storeinfo ref="getShopinfoData" :extract_store="extract_store" :chooseSotr="chooseSotr"
						:last_extract="last_extract" style="flex: 1;"></Storeinfo>
				</view>
			</radio-group>

			<view class="distr_btn">
				<button class="theme-btn" @click="closePopup">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Storeinfo from './store-info';

	export default {
		data() {
			return {
				/*是否可见*/
				Visible: false,
				checked_id: 10,
				choose_store_id: 0
			}
		},
		components: {
			Storeinfo,
		},
		props: ['isDist', 'extract_store', 'last_extract', 'deliverySetting', 'chooseSotr', 'choose_delivery'],
		watch: {
			isDist(val) {
				this.Visible = val;
				if (val) {
					this.checked_id = this.choose_delivery;
				}
			}
		},
		methods: {
			closePopup(e) {
				if (!e) {
					this.$emit('close', false);
					return
				}
				if (this.checked_id == 20 && this.$props.extract_store.store_id == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择自提点'
					})
				} else {
					this.$emit('close', this.checked_id);
				}
			},
			radioChange(evt) {
				let self = this;
				self.checked_id = evt.detail.value;
				self.$fire.fire('checkedfir', self.checked_id);
			},
			hasType(n) {
				return this.deliverySetting.indexOf(n) != -1;
			}
		}

	}
</script>

<style>
	.usable-distr .popup-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}

	.usable-distr .main {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		min-height: 400rpx;
		max-height: 1400rpx;
		background-color: #fff;
		transform: translate3d(0, 980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;
		box-sizing: border-box;
		padding: 0 30rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
	}

	.usable-distr.open .main {
		transform: translate3d(0, 0, 0);
	}

	.usable-distr.close .popup-bg {
		display: none;
	}

	.distr-tit {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 45rpx;
		margin-bottom: 10rpx;
	}

	.distr-list {
		padding: 34rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.distr_btn button {
		width: 704rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 88rpx;
	}
</style>